<script>

import {getConfig, transfer} from "@/api/distribute";
import config from "@/config/index"

export default {
    name: "weixin",
    data() {
        return {
            distributeValue:0,
            ready:false,
            config:null
        }
    },
    created() {
        getConfig().then(data=>{
            this.config=data;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名
                jsApiList: ["requestMerchantTransfer"], // 必填，需要使用的JS接口列表
            })
        })
        wx.ready(()=>{
            this.ready=true;
        })
    },
    methods:{
        // 授权登录微信回调
        loginWeixin(){
            var url = "https://sub.zzwx.cn";
            const enUrl = encodeURI(url);
            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23cad5c852546907&redirect_uri=${enUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
        },
        transfer(){
            const params =new URLSearchParams(location.search);
            if (params.code) {
                window.alert("请先授权登录");
                return;
            }

            if (!this.distributeValue) {
                window.alert("请输入提现金额");
                return;
            }
            if(Number.isNaN(Number(this.distributeValue))){
                // 金额格式错误
                return alert("请输入正确的金额");
            }
            transfer({
                code:params.get("code"),
                // 单位 分
                amount:Number(this.distributeValue)*100
            }).then(data=>{
                if(!this.ready) return alert("尚未初始化完成，请稍后");
                if (data.state === "WAIT_USER_CONFIRM") {
                    wx.checkJsApi({
                        jsApiList: ["requestMerchantTransfer"],
                        success:  (res)=> {
                            if (res.checkResult["requestMerchantTransfer"]) {
                                WeixinJSBridge.invoke(
                                    "requestMerchantTransfer",
                                    {
                                        mchId: config.mchId,
                                        appId: this.config.appId,
                                        package: data.packageInfo,
                                    },
                                    function (res) {
                                        // 用户确认收款后。发起请求？更应该是转账完成回调接口处理，用户请求不必要
                                        console.log(res)
                                        // 建议拉起用户确认收款页面前，先查单据状态：
                                        // 如单据状态为待收款用户确认，可用之前的package信息拉起；单据到终态时需更换单号重新发起转账。
                                        if (res.err_msg === "requestMerchantTransfer:ok") {
                                            // res.err_msg将在页面展示成功后返回应用时返回success，并不代表付款成功
                                        }else{
                                            // 用户取消收款
                                        }
                                    }
                                );
                            } else {
                                alert("你的微信版本过低，请更新至最新版本。");
                            }
                        },
                    });
                }else{
                    console.alert("转账异常")
                }
            })
        }
    }
}
</script>

<template>
    <div class="h5-distribute">
        <el-button class="btn" @click="loginWeixin">微信授权登录</el-button>
        <el-input v-model="distributeValue" placeholder="请输入提现金额"></el-input>
        <el-button type="primary" class="btn" @click="transfer">提现</el-button>
    </div>
</template>

<style scoped lang="scss">
    .h5-distribute{
        margin: 16px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 0 4px rgba(0,0,0,0.1);
        padding: 12px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 32px;
        align-items: center;
    }
    .btn{
        width: 50%;
    }
</style>
